<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/all.min.css">
    <style>
      body {
        font-family: 'Roboto', sans-serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <!-- 方式 1，通过 link 引入 css, 再使用下面方式 -->
    <div>
        <i class="fas fa-home"></i> <!-- Solid 图标-->
        <i class="far fa-user"></i> <!-- Regular 图标-->
        <i class="fab fa-twitter"></i> <!-- Brands 图标-->
    </div>
    
    
    <div>
        <i class="fas fa-home"></i> <!-- Solid 图标-->
        <i class="far fa-user"></i> <!-- Regular 图标-->
        <i class="fab fa-twitter"></i> <!-- Brands 图标-->
    </div>

    <!--直接嵌入 HTML-->
    <div>
        <button>
            <svg width="48" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M277.8 8.6c-12.3-11.4-31.3-11.4-43.5 0l-224 208c-9.6 9-12.8 22.9-8 35.1S18.8 272 32 272l16 0 0 176c0 35.3 28.7 64 64 64l288 0c35.3 0 64-28.7 64-64l0-176 16 0c13.2 0 25-8.1 29.8-20.3s1.6-26.2-8-35.1l-224-208zM240 320l32 0c26.5 0 48 21.5 48 48l0 96-128 0 0-96c0-26.5 21.5-48 48-48z"/></svg>
        </button>

    </div>

    <!--创建 svg Sprite 文件，通过<use>引用-->
    <!-- <div>
        <button>
            <svg width="48" height="48" >
              <use href="sprites/solid.svg#house"></use>      
            </svg>
        </button>
        <button>
            <svg width="48" height="48" >
              <use href="sprites/regular.svg#user"></use>      
            </svg>
        </button>
    </div> -->
    
  </body>
</html>